// 实现通用的图片懒加载（插件级别）

// 动态的设置图片src

/* 思路： 就是创建一个自定义属性，属性值是原本src的属性值，也就是图片地址，然后使用：getAttribute() 获取属性值，
 * 在通过js在特定的时期把这个属性值读出来放到src里面。
 */


//  方式一：
/* getAttribute()  :  getAttribute() 方法获取指定属性名的属性值。
 *
 *  例如 ：获取target的属性值， document.getElementsByTagName("a")[0].getAttribute("target");
*/

// 方式二：
/*通过dataset对象获取自定义属性
 * dataset是一个对象，该对象记录了该元素的所有的自定义属性
 * 就是如果安照data-自定义属性的方式，比如data-src
 * 这里的img是你通过document.getElementByid("")获取的dom元素
 * 那么你可以console.log(img.dataset.src)
 *
 */





// 初始化页面中所以需要懒加载的图片
// defaultSrc : 默认的图片路径
function initLazyImg(defaultSrc) { 

  //1.获取所有需要懒加载的img元素，也就是具有data-src的属性，因为我们既然设置了这个属性，那么就是因为我们要实现懒加载啊。
  var imgs = document.querySelectorAll("[data-src]");


  imgs = Array.from(imgs);  //Array.from可以将伪数组转换为真数组，伪数组是用不了数组中的方法的，比如下面要用到的split()



  //2.调用设置默认图片的方法，设置默认图片
  setDefault();


  // 3.调用设置懒加载图片的方法，设置懒加载图片
  loadImgs();



  //4. 注册滚动事件。
  var time = null;
  window.addEventListener("scroll", function () { 

    clearTimeout(time)
    time = setTimeout(function () { 

      loadImgs();

    },500)
    
     
  })


  //设置默认图片方法
  function setDefault() { 

    // 在同一次渲染页面的过程中，如果它发现了你这个页面中请求了许多次同样的图片，那它会做一个缓存，然后后面的就用缓存的图片。
    // 循环遍历添加默认图片
    for (var i = 0; i < imgs.length; i++) { 

      imgs[i].src = defaultSrc;

    }

  }

  // 懒加载必要图片
  // 该函数可以智能的分析出那些当前情况下需要懒加载的图片，让其完成加载，而其他图片不动
  function loadImgs() { 

    for (var i = 0; i < imgs.length; i++) { 

      var img = imgs[i]   //拿到当前图片
      
      // 把每一次拿到的当前图片当成参数传给另一个函数，在另一个函数里面进行逻辑处理。
      loadImg(img)

      // 已经加载过了的图片就不用再进行加载了，所以如果该图片进行了加载，则将该图片从数组中移除。
      if (loadImg(img)) { 

        imgs.splice(i, 1);

        // 这里为什么要i--呢，因为你删除了数组中的一个，假如是第一个[0],那么原来你没有删除之前的第二个[1],就变成了[0],所以如果你没有i--,那这个就会漏过，因为下一次要看的是[1],而不是你这个新的[0]了。
        i--

      }

    }

  }

  function loadImg(img) { 

      // 1.该图片是否要加载
    // Element.getBoundingClientRect()方法返回元素的大小及其相对于视口的位置。
    var rect = img.getBoundingClientRect();

    // 视口高度：document.documentElement.clientHeight
    // 视口宽度：document.documentElement.clientWidth
    if (rect.right > 0 && rect.left < document.documentElement.clientWidth && rect.bottom > 0 && rect.top < document.documentElement.clientHeight) { 

      //  该元素在视口内
      img.src = img.dataset.src;

      return true;  //表示进行了懒加载

    }

    return false;  //表示没有进行懒加载。

  }

}